<template>
	<div class="main-router-view">
		<div class="title">{{id ? '编辑': '新建'}}预告</div>
		<el-form label-width="100px" @submit.native.prevent="save">
			<el-form-item label="影片ID">
				<el-input v-model="model.movieId"></el-input>
			</el-form-item>
			<el-form-item label="影片名">
				<el-input v-model="model.movieName"></el-input>
			</el-form-item>
			<el-form-item label="预告链接">
				<el-input v-model="model.movieUrl"></el-input>
			</el-form-item>
			<el-form-item label="封面">
				<el-upload class="avatar-uploader" :action="http.defaults.baseURL + '/movie/api/upload'" :show-file-list="false"
					:on-success="afterUpload">
					<img v-if="model.cover" :src="$mConfig.formatFileUrl(model.cover)" class="avatar" />
					<div v-else class="avatar-uploader-icon">
						<i class="el-icon-plus "></i>
					</div>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" round native-type="submit">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "TrailerEdit",
		props: {
			// id: {}
		},
		data() {
			return {
				model: {},
				id: {}
			};
		},
		methods: {
			afterUpload(res) {
				this.$set(this.model, 'cover', res.url)
			},
			// 保存
			async save() {
				let res = "";
				if (this.id) {
					res = await this.http.post(`admin/trailers/item/${this.id}`, this.model);
				} else {
					res = await this.http.post("admin/trailers/create", this.model);
				}

				this.$router.push({
					name: "TrailerList"
				});
				this.$message({
					type: "success",
					message: "保存成功"
				});
			},
			//存在id 获取详情
			async fetchInfo(id) {
				const res = await this.http.get(`admin/trailers/item/${id}`);
				this.model = res.data;
			}
		},
		created() {
			this.id = this.$route.params.id

			console.log(this.id)

			this.id && this.fetchInfo(this.id);
		}
	};
</script>

<style>
	
	.title{
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 15px;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
